<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <%@include file="/include/head.jsp"%>
    <title>优惠券</title>
    <script src="${rootPath}/static/js/mui.pullToRefresh.js"></script>
    <script src="${rootPath}/static/js/mui.pullToRefresh.material.js"></script>
    <script src="${rootPath}/static/js/paginationRequest.js"></script>
    <link rel="stylesheet" type="text/css" href="${rootPath}/static/css/coupon.css" />
    <script type="text/javascript">
        var dataListUrl = "${rootPath}/customer/account/coupon/list.do";
    </script>
</head>
<body>
<header class="mui-bar mui-bar-nav qy-bg-white qy-border-bottom">
    <a class="mui-icon mui-icon-back qy-text-black" href="/customer/center.do"></a>
    <h1 class="mui-title qy-text-black qy-font-size-20px">优惠券</h1>
</header>
<nav class="mui-bar mui-bar-tab qy-bg-white qy-border-top">
    <a class="qy-block qy-font-size-18px qy-text-center qy-text-black qy-full-height qy-font-lineHeight-30px" href="/customer/CouponCenter.do">去领券中心</a>
</nav>
<div class="mui-content">
    <div id="slider" class="mui-slider mui-fullscreen">
        <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
            <a class="mui-control-item mui-active" href="#couponItem1">
                <span class="mui-inline">未使用<i class="active-line"></i></span>
            </a>
            <a class="mui-control-item" href="#couponItem2">
                <span class="mui-inline">已使用<i class="active-line"></i></span>
            </a>
            <a class="mui-control-item" href="#couponItem3">
                <span class="mui-inline">已过期<i class="active-line"></i></span>
            </a>
        </div>

        <div class="mui-slider-group">
            <div id="couponItem1" class="mui-slider-item mui-control-content mui-active">

                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll qy-padding-vertical-14px" id="vueListBox0">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                        <div class="mui-table-view">
                            <div v-for="card in datas" class="qy-margin-horizontal-6px qy-font-size-12px qy-bg-white">
                                <div class="qy-boxshadow mui-row">
                                    <div class="mui-col-xs-8 qy-padding-left-12px">
                                        <div class="qy-font-size-14px qy-font-weight-bold qy-font-lineHeight-18px qy-text-black">适用：{{card.name}}</div>
                                        <div class="qy-font-lineHeight-16px qy-text-gray9">满{{ card.subtractionMoney }}元可用</div>
                                        <div class="qy-border-dashed-bottom qy-font-lineHeight-16px qy-text-gray9">有效期：{{ card.startTime }}至{{ card.endTime }}</div>
                                        <div class="qy-font-lineHeight-16px qy-text-gray9">
                                            详细信息
                                            <i class="mui-icon mui-icon-arrowdown qy-bg-whitef5 qy-font-size-16px qy-full-borderRarius qy-margin-left-8px"></i>
                                        </div>
                                    </div>
                                    <div :class="{'manjian':card.type==0,'manzhe':card.type==1,'mandi':card.type==2}" class="mui-col-xs-4 qy-border-dashed-left qy-full-height qy-padding-top-30px qy-text-white">
                                        <p class="qy-text-center qy-text-white qy-font-lineHeight-30px">
                                            <span v-if="card.type == 0" class="qy-font-size-28px">￥{{card.money}}</span>
                                            <span v-if="card.type == 1" class="qy-font-size-28px">{{card.discount * 100}}%</span>
                                            <span v-if="card.type == 2" class="qy-font-size-28px">￥{{card.maxDiscountMoney}}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="mui-col-xs-12 qy-padding-left-12px qy-padding-horizontal-10px qy-text-gray9">限品类：{{ card.detail }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="couponItem2" class="mui-slider-item mui-control-content">

                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll qy-padding-vertical-14px"  id="vueListBox1">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                        <div class="mui-table-view">
                            <div v-for="card in datas" class="qy-margin-horizontal-6px qy-font-size-12px qy-bg-white">
                                <div class="qy-boxshadow mui-row">
                                    <div class="mui-col-xs-8 qy-padding-left-12px">
                                        <div class="qy-font-size-14px qy-font-weight-bold qy-font-lineHeight-18px qy-text-black">适用：仁爱医院体检套餐</div>
                                        <div class="qy-font-lineHeight-16px qy-text-gray9">满{{ card.subtractionMoney }}元可用</div>
                                        <div class="qy-border-dashed-bottom qy-font-lineHeight-16px qy-text-gray9">有效期：{{ card.startTime }}至{{ card.endTime }}</div>
                                        <div class="qy-font-lineHeight-16px qy-text-gray9">
                                            详细信息
                                            <i class="mui-icon mui-icon-arrowdown qy-bg-whitef5 qy-font-size-16px qy-full-borderRarius qy-margin-left-8px"></i>
                                        </div>
                                        <img src="${rootPath}/static/imgs/discountused.png" class="qy-position-absolute qy-position-right0 qy-position-top0 width20" />
                                    </div>
                                    <div :class="{'usedmanjian':card.type==0,'usedmanzhe':card.type==1,'usedmandi':card.type==2}" class="mui-col-xs-4 qy-border-dashed-left qy-full-height qy-padding-top-30px qy-text-white">
                                        <p class="qy-text-center qy-text-white qy-font-lineHeight-30px">
                                            <span v-if="card.type == 0" class="qy-font-size-28px">￥{{card.money}}</span>
                                            <span v-if="card.type == 1" class="qy-font-size-28px">{{card.discount * 100}}%</span>
                                            <span v-if="card.type == 2" class="qy-font-size-28px">￥{{card.maxDiscountMoney}}</span>
                                        </p>

                                    </div>
                                </div>
                                <div class="mui-col-xs-12 qy-padding-left-12px qy-padding-horizontal-10px qy-text-gray9">限品类：{{ card.detail }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="couponItem3" class="mui-slider-item mui-control-content">

                <div class="mui-scroll-wrapper">
                    <div class="mui-scroll qy-padding-vertical-14px" id="vueListBox2">
                        <div class="mui-loading">
                            <div class="mui-spinner">
                            </div>
                        </div>
                        <div class="mui-table-view">
                            <div v-for="card in datas" class="qy-margin-horizontal-6px qy-font-size-12px qy-bg-white">
                                <div class="qy-boxshadow mui-row">
                                    <div class="mui-col-xs-8 qy-padding-left-12px">
                                        <div class="qy-font-size-14px qy-font-weight-bold qy-font-lineHeight-18px qy-text-black">适用：仁爱医院体检套餐</div>
                                        <div class="qy-font-lineHeight-16px qy-text-gray9">满{{ card.subtractionMoney }}元可用</div>
                                        <div class="qy-border-dashed-bottom qy-font-lineHeight-16px qy-text-gray9">有效期：{{ card.startTime }}至{{ card.endTime }}</div>
                                        <div class="qy-font-lineHeight-16px qy-text-gray9">
                                            详细信息
                                            <i class="mui-icon mui-icon-arrowdown qy-bg-whitef5 qy-font-size-16px qy-full-borderRarius qy-margin-left-8px"></i>
                                        </div>
                                    </div>
                                    <div :class="{'usedmanjian':card.type==0,'usedmanzhe':card.type==1,'usedmandi':card.type==2}" class="mui-col-xs-4 qy-border-dashed-left qy-full-height qy-padding-top-30px qy-text-white">
                                        <p class="qy-text-center qy-text-white qy-font-lineHeight-30px">
                                            <span v-if="card.type == 0" class="qy-font-size-28px">￥{{card.money}}</span>
                                            <span v-if="card.type == 1" class="qy-font-size-28px">{{card.discount * 100}}%</span>
                                            <span v-if="card.type == 2" class="qy-font-size-28px">￥{{card.maxDiscountMoney}}</span>
                                        </p>
                                    </div>
                                </div>
                                <div class="mui-col-xs-12 qy-padding-left-12px qy-padding-horizontal-10px qy-text-gray9">限品类：{{ card.detail }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript" charset="utf-8" src="${rootPath}/static/js/coupon.js"></script>